﻿<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxGrid directive for AngularJS. Refresh Source</title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope) {
            // Grid data.
            var data = new Array();
            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
            var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
            var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];
            var city = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "London", "London", "Seattle", "London"];
            var country = ["USA", "USA", "USA", "USA", "UK", "UK", "UK", "USA", "UK"];

            for (var i = 0; i < 4; i++) {
                var row = {};
                row["firstname"] = firstNames[i];
                row["lastname"] = lastNames[i];
                row["title"] = titles[i];
                row["city"] = city[i];
                row["country"] = country[i];
                data.push(row);
            }

            $scope.settings =
            {
                altrows: true,
                width: 800,
                height: 200,
                ready: function()
                {
                    $scope.settings.apply('selectrow', 1);
                },
                sortable: true,
                source: new $.jqx.dataAdapter({
                    localdata: data,
                    datafields: 
                    [
                        {name: "firstname", type: "string" },
                        {name: "lastname", type: "string"},
                        {name: "title", type: "string"},
                        {name: "city", type: "string"},
                        {name: "country", type: "string"}
                    ]
                }),
                columns: [
                    { text: 'First Name', datafield: 'firstname', width: 150 },
                    { text: 'Last Name', datafield: 'lastname', width: 150 },
                    { text: 'Title', datafield: 'title', width: 150 },
                    { text: 'City', datafield: 'city', width: 150 },
                    { text: 'Country', datafield: 'country' }
                ]
            }
            $scope.refresh = function () {
                data = new Array();
                for (var i = 4; i < firstNames.length; i++) {
                    var row = {};
                    row["firstname"] = firstNames[i];
                    row["lastname"] = lastNames[i];
                    row["title"] = titles[i];
                    row["city"] = city[i];
                    row["country"] = country[i];
                    data.push(row);
                }

                $scope.settings.source = new $.jqx.dataAdapter({
                    localdata: data,
                    datafields:
                    [
                        { name: "firstname", type: "string" },
                        { name: "lastname", type: "string" },
                        { name: "title", type: "string" },
                        { name: "city", type: "string" },
                        { name: "country", type: "string" }
                    ]
                });
            }
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-grid jqx-settings="settings"></jqx-grid>
        <br />
        <jqx-button jqx-on-click="refresh()">Refresh Source</jqx-button>
    </div>
</body>
</html>
